<!doctype html>
<html>
<head>
	<meta charset="utf8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	

	<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- Bootstrap responsive -->
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
	<!-- CSS for Growl like notifications -->
	<link rel="stylesheet" href="css/jquery.gritter.css">
	<!-- Theme CSS -->
	<!--[if !IE]> -->
	<link rel="stylesheet" href="css/style.css">
	<!-- <![endif]-->
	<!--[if IE]>
	<link rel="stylesheet" href="css/style_ie.css">
	<![endif]-->

	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- smoother animations -->
	<script src="js/jquery.easing.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Scrollable navigation -->
	<script src="js/jquery.nicescroll.min.js"></script>
	<!-- Growl Like notifications -->
	<script src="js/jquery.gritter.min.js"></script>

	<!-- Just for demonstration -->
	<script src="js/demonstration.min.js"></script>
	<!-- Theme framework -->
	<script src="js/eakroko.min.js"></script>
	<!-- Theme scripts -->
	<script src="js/application.min.js"></script>
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />

</head>

<body data-layout="fixed">
	<div id="top"> 
		<div class="container-fluid">
			<div class="pull-left">
				<a href="#" id="brand"><span></span>ease</a>
				<div class="collapse-me">
					<a href="messages.html" class="button">
						<i class="icon-comment icon-white"></i>
						Messages
						<span class="badge badge-important">21</span>
					</a>
					<a href="#" class="button">
						<i class="icon-question-sign icon-white"></i>
						Support tickets
						<span class="badge badge-info">3</span>
					</a>
					<a href="#" class="button">
						<i class="icon-truck icon-white"></i>
						Orders
						<span class="badge badge-default">5</span>
					</a>
				</div>
			</div>
			<div class="pull-right">
				<div class="btn-group">
					<a href="#" class="button dropdown-toggle" data-toggle="dropdown"><i class="icon-white icon-user"></i>John Doe<span class="caret"></span></a>
					<div class="dropdown-menu pull-right">
						<div class="right-details">
							<h6>Logged in as</h6>
							<span class="name">John Doe</span>
							<span class="email">john.doe@example.com</span>
							<a href="#" class="highlighted-link">Need help?</a>
							<ul>
								<li>
									<a href="#">Getting started</a>
								</li>
								<li>
									<a href="#">Account settings</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<a href="index.html" class="button">
					<i class="icon-signout"></i>
					Logout
				</a>
			</div>
		</div>
	</div>

	<div id="main">
		<div id="navigation">
			<div class="search">
				<i class="icon-search icon-white"></i>
				<form action="search-page.html" method="get">
					<input type="text" placeholder="Search here" />
				</form>
				<div class="dropdown">
					<a href="#" class='search-settings dropdown-toggle' data-toggle="dropdown"><i class="icon-cog icon-white"></i></a>
					<ul class="dropdown-menu">
						<li class='sort-by'>
							Sort by <span class='filter'>Categories</span> <span class="order">A-Z</span>
						</li>
						<li class="heading">
							Filter categories
						</li>
						<li class='filter active'>
							Categories
						</li>
						<li class="filter">
							Countries
						</li>
						<li class="filter">
							Likes
						</li>
						<li class="heading">
							Sorting order
						</li>
						<li class='order active'>
							Ascending
						</li>
						<li class="order">
							Descending
						</li>
					</ul>
				</div>
			</div>

			<ul class="mainNav" data-open-subnavs="multi">
				<li>
					<a href="dashboard.html"><i class="icon-home icon-white"></i><span>Dashboard</span></a>
				</li>
				<li>
					<a href="#"><i class="icon-edit icon-white"></i><span>Forms</span><span class="label">4</span></a>
					<ul class="subnav">
						<li>
							<a href="basic-forms.html">Basic forms</a>
						</li>
						<li>
							<a href="extended-forms.html">Extended form elements</a>
						</li>
						<li>
							<a href="form-validation.html">Form validation</a>
						</li>
						<li>
							<a href="form-wizard.html">Form wizard</a>
						</li>
					</ul>
				</li>
				<li class='active open'>
					<a href="#"><i class="icon-th-large icon-white"></i><span>Components</span><span class="label">7</span></a>
					<ul class="subnav">
						<li class='active'>
							<a href="messages.html">Messages &amp; Chat</a>
						</li>
						<li>
							<a href="gallery.html">Gallery &amp; thumbs</a>
						</li>
						<li>
							<a href="icons-buttons.html">Icons &amp; buttons</a>
						</li>
						<li>
							<a href="ui-elements.html">UI Elements</a>
						</li>
						<li>
							<a href="typography.html">Typography</a>
						</li>
						<li>
							<a href="bootstrap-elements.html">Bootstrap elements</a>
						</li>
						<li>
							<a href="grid.html">Grid</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="charts.html"><i class="icon-signal icon-white"></i><span>Charts</span></a>
				</li>
				<li>
					<a href="tables.html"><i class="icon-th-list icon-white"></i><span>Tables</span></a>
				</li>
				<li>
					<a href="error-pages.html"><i class="icon-warning-sign icon-white"></i><span>Error Pages</span></a>
				</li>
				<li>
					<a href="calendar.html"><i class="icon-calendar icon-white"></i><span>Calendar</span></a>
				</li>
				<li>
					<a href="file-management.html"><i class="icon-hdd icon-white"></i><span>File management</span></a>
				</li>
			<li>
					<a href="#"><i class="icon-th icon-white"></i><span>More pages</span><span class="label">4</span></a>
					<ul class="subnav">
						<li>
							<a href="invoice.html">Invoice</a>
						</li>
						<li>
							<a href="search-page.html">Search page</a>
						</li>
						<li>
							<a href="user-profile.html">User profile</a>
						</li>
						<li>
							<a href="blank-page.html">Blank page</a>
						</li>
					</ul>
				</li>
			</ul>
			<div class="status button">
				<div class="status-top">
					<div class="left">
						Saving changes...
					</div>
				</div>
				<div class="status-bottom">
					<div class="progress">
						<div class="bar" style="width:60%">60%</div>
					</div>
				</div>
			</div>
		</div>
		<div id="content">
			<div class="page-header">
				<div class="pull-left">
					<h4><i class="icon-comments-alt"></i> Messages &amp; Chat</h4>
				</div>
				<div class="pull-right">
					<ul class="bread">
						<li><a href="dashboard.html">Home</a><span class="divider">/</span></li>
						<li><a href="messages.html">Components<span class="divider">/</span></a></li>
						<li class='active'>Messages &amp; Chat</li>
					</ul>
				</div>
			</div>

			<div class="container-fluid" id="content-area">
				<div class="row-fluid">
					<div class="span12">
						<div class="box">
							<div class="box-head">
								<i class="icon-inbox"></i>
								<span>Messages</span>
							</div>
							<div class="box-body box-body-nopadding">
								<div class="highlight-toolbar">
									<div class="pull-left"><div class="btn-toolbar">
										<div class="btn-group"><a href="#" class="button button-basic button-icon" rel="tooltip" title="Refresh results"><i class="icon-refresh"></i></a></div>
										<div class="btn-group">
											<div class="dropdown">
												<a href="#" class="button button-basic button-icon" data-toggle="dropdown" rel="tooltip" title="Mark elements"><i class="icon-check-empty"></i><span class="caret"></span></a>
												<ul class="dropdown-menu">
													<li><a href="#" class='sel-all'>All</a></li>
													<li><a href="#" class='sel-unread'>Unread</a></li>
												</ul>
											</div>
										</div>
										<div class="btn-group">
											<a href="#" class='button button-basic button-icon' rel="tooltip" title="Archive"><i class="icon-inbox"></i></a>
											<a href="#" class='button button-basic button-icon' rel="tooltip" title="Mark as spam"><i class="icon-exclamation-sign"></i></a>
											<a href="#" class='button button-basic button-icon' rel="tooltip" title="Delete"><i class="icon-trash"></i></a>
										</div>
										<div class="btn-group">
											<div class="dropdown">
												<a href="#" class="button button-basic button-icon" data-toggle="dropdown" rel="tooltip" title="Move to folder"><i class="icon-folder-close"></i><span class="caret"></span></a>
												<ul class="dropdown-menu">
													<li><a href="#">Some folder</a></li>
													<li><a href="#">Another folder</a></li>
												</ul>
											</div>
										</div>
									</div></div>
									<div class="pull-right">
										<div class="btn-toolbar">
											<div class="btn-group">
												<span><strong>1-25</strong> of <strong>348</strong></span>
											</div>
											<div class="btn-group">
												<a href="#" class="button button-basic button-icon" data-toggle="dropdown"><i class="icon-angle-left"></i></a>
												<a href="#" class="button button-basic button-icon" data-toggle="dropdown"><i class="icon-angle-right"></i></a>
											</div>
											<div class="btn-group">
												<div class="dropdown">
													<a href="#" class="button button-basic button-icon" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a>
													<ul class="dropdown-menu pull-right">
														<li><a href="#">Settings</a></li>
														<li><a href="#">Account settings</a></li>
														<li><a href="#">Email settings</a></li>
														<li><a href="#">Themes</a></li>
														<li><a href="#">Help &amp; FAQ</a></li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
								<table class="table table-striped table-nomargin table-mail">
									<thead>
										<tr>
											<th class='table-checkbox'>
												<input type="checkbox" class='sel-all'>
											</th>
											<th class='table-icon'></th>
											<th>Sender</th>
											<th>Subject</th>
											<th class='table-icon'></th>
											<th class='table-date'>Date</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star active"><i class="icon-star"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Johny Doesy
											</td>
											<td>
												Lorem ipsum sint laborum.
											</td>
											<td class='table-icon'>
												<i class="icon-paper-clip"></i>
											</td>
											<td class='table-date'>
												12. Feb
											</td>
										</tr>
										<tr class='unread'>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star"><i class="icon-star-empty"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Lorem ipsum												
											</td>
											<td>
												Lorem ipsum veniam esse nisi in ut aliquip do laboris sed pariatur. 
											</td>
											<td class='table-icon'>
												<i class="icon-paper-clip"></i>
											</td>
											<td class='table-date'>
												11. Feb
											</td>
										</tr>
										<tr>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star"><i class="icon-star-empty"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Officia In									
											</td>
											<td>
												Lorem ipsum dolore do ullamco id ullamco occaecat sed dolore adipisicing officia in cillum ut.  
											</td>
											<td class='table-icon'>
											</td>
											<td class='table-date'>
												10. Feb
											</td>
										</tr>
										<tr>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star"><i class="icon-star-empty"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Occaecat Tempor										
											</td>
											<td>
												Lorem ipsum ut in in eiusmod ut occaecat tempor.  
											</td>
											<td class='table-icon'>
											</td>
											<td class='table-date'>
												9. Feb
											</td>
										</tr>
										<tr>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star"><i class="icon-star-empty"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Sed Elit									
											</td>
											<td>
												Lorem ipsum sed sed elit nisi adipisicing mollit eu adipisicing. 
											</td>
											<td class='table-icon'>
											</td>
											<td class='table-date'>
												8. Feb
											</td>
										</tr>
										<tr>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star active"><i class="icon-star"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Johny Doesy
											</td>
											<td>
												Lorem ipsum sint laborum.
											</td>
											<td class='table-icon'>

											</td>
											<td class='table-date'>
												12. Feb
											</td>
										</tr>
										<tr class='unread'>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star"><i class="icon-star-empty"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Lorem ipsum												
											</td>
											<td>
												Lorem ipsum veniam esse nisi in ut aliquip do laboris sed pariatur. 
											</td>
											<td class='table-icon'>

											</td>
											<td class='table-date'>
												11. Feb
											</td>
										</tr>
										<tr>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star"><i class="icon-star-empty"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Officia In									
											</td>
											<td>
												Lorem ipsum dolore do ullamco id ullamco occaecat sed dolore adipisicing officia in cillum ut.  
											</td>
											<td class='table-icon'>

											</td>
											<td class='table-date'>
												10. Feb
											</td>
										</tr>
										<tr>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star"><i class="icon-star-empty"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Occaecat Tempor										
											</td>
											<td>
												Lorem ipsum ut in in eiusmod ut occaecat tempor.  
											</td>
											<td class='table-icon'>
												<i class="icon-paper-clip"></i>
											</td>
											<td class='table-date'>
												9. Feb
											</td>
										</tr>
										<tr>
											<td class='table-checkbox'>
												<input type="checkbox" class='selectable'>
											</td>
											<td class='table-icon'>
												<a href="#" class="sel-star"><i class="icon-star-empty"></i></a>
											</td>
											<td class='table-fixed-medium'>
												Sed Elit									
											</td>
											<td>
												Lorem ipsum sed sed elit nisi adipisicing mollit eu adipisicing. 
											</td>
											<td class='table-icon'>

											</td>
											<td class='table-date'>
												8. Feb
											</td>
										</tr>

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<div class="box">
							<div class="box-head">
								<i class="icon-comments"></i>
								<span>Chat</span>
								<div class="actions">
									<a href="#" rel='tooltip' title="Save conversation"><i class="icon-save"></i></a>
									<a href="#" rel='tooltip' title="Show history" data-placement="left"><i class="icon-time"></i></a>
								</div>
							</div>
							<div class="box-body box-body-nopadding">
								<ul class="messages">
									<li class="left">
										<div class="image">
											<img src="img/user-1.jpg" alt="">
										</div>
										<div class="message">
											<span class="name">Johny Doesy</span>
											<p>Lorem ipsum aute ut ullamco et nisi ad. Lorem ipsum adipisicing nisi Excepteur eiusmod ex culpa laboris. Lorem ipsum est ut irure ad esse minim ullamco. Lorem ipsum Duis est eu occaecat commodo non dolore cupidatat ut id laborum nisi culpa eu occaecat sit. Lorem ipsum aute laborum nostrud incididunt proident amet. </p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="right">
										<div class="image">
											<img src="img/user-2.jpg" alt="">
										</div>
										<div class="message">
											<span class="name">John Doe</span>
											<p>Lorem ipsum aute ut ullamco et nisi ad. Lorem ipsum adipisicing nisi Excepteur eiusmod ex culpa laboris. Lorem ipsum est ut irure ad esse minim ullamco. Lorem ipsum Duis est eu occaecat commodo non dolore cupidatat ut id laborum nisi culpa eu occaecat sit. Lorem ipsum aute laborum nostrud incididunt proident amet. </p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="left">
										<div class="image">
											<img src="img/user-1.jpg" alt="">
										</div>
										<div class="message">
											<span class="name">Johny Doesy</span>
											<p>Lorem ipsum aute ut ullamco et nisi ad. Lorem ipsum adipisicing nisi Excepteur eiusmod ex culpa laboris. Lorem ipsum est ut irure ad esse minim ullamco. Lorem ipsum Duis est eu occaecat commodo non dolore cupidatat ut id laborum nisi culpa eu occaecat sit. Lorem ipsum aute laborum nostrud incididunt proident amet. </p>
											<span class="time">
												12 minutes ago
											</span>
										</div>
									</li>
									<li class="typing">
										<span class="name">John Doe</span> is typing <img src="img/loading.gif" alt="">
									</li>
									<li class="insert">
										<div class="test">
											<a href="#" class="button button-highlighted"><i class="icon-camera"></i></a>
										</div>
										<div class="text">
											<div class="dropup">
												<a href="#" data-toggle="dropdown" class="dropdown-toggle">
													<i class="icon-caret-up"></i>
												</a>
												<div class='dropdown-menu pull-right'>
													<ul class="smilies">
														<li>
															<a href="#">
																<img src="img/icons/smiley.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-zipper.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-yell.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-wink.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-twist.png" alt="">
															</a>
														</li>
													</ul>
													<ul class="smilies">
														<li>
															<a href="#">
																<img src="img/icons/smiley-sweat.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-surprise.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-slim.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-sleep.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-sad.png" alt="">
															</a>
														</li>
													</ul>
													<ul class="smilies">
														<li>
															<a href="#">
																<img src="img/icons/smiley-roll.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-red.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-razz.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-neutral.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-nerd.png" alt="">
															</a>
														</li>
													</ul>
													<ul class="smilies">
														<li>
															<a href="#">
																<img src="img/icons/smiley-neutral.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-mad.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-lol.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-kitty.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-kiss.png" alt="">
															</a>
														</li>
													</ul>
													<ul class="smilies">
														<li>
															<a href="#">
																<img src="img/icons/smiley-grin.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-fat.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-eek.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-draw.png" alt="">
															</a>
														</li>
														<li>
															<a href="#">
																<img src="img/icons/smiley-cry.png" alt="">
															</a>
														</li>
													</ul>
												</div>
											</div>
											<input type="text" name="text" placeholder="Write here..." class="input-block-level">
										</div>
										<div class="submit">
											<input type="submit" value="Send" class='button button-highlighted'>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="navi-functions">
		<div class="btn-group btn-group-custom">
			<a href="#" class="button button-square layout-not-fixed notify" rel="tooltip" title="Toggle fixed-nav" data-notify-message="Fixed nav is now {{state}}" data-notify-title="Toggled fixed nav">
				<i class="icon-unlock"></i>
			</a>
			<a href="#" class="button button-square layout-not-fluid notify button-active" rel="tooltip" title="Toggle fixed-layout" data-notify-message="Fixed layout is now {{state}}" data-notify-title="Toggled fixed layout">
				<i class="icon-exchange"></i>
			</a>
			<a href="#" class="button button-square notify notify-inverse layout-no-nav" rel="tooltip" title="Toggle navigation" data-notify-message="Navigation is now {{state}}" data-notify-title="Toggled navigation">
				<i class="icon-arrow-left"></i>
			</a>
			<a href="#" class="button button-square button-active force-last notify-toggle toggle-active notify" rel="tooltip" title="Toggle notification"  data-notify-message="Notifications turned {{state}}" data-notify-title="Toggled notifications">
				<i class="icon-bullhorn"></i>
			</a>
		</div>
	</div>


</body>
</html>